---
id: 6494da0daf5df5197963671d
title: Крок 8
challengeType: 0
dashedName: step-8
---

# --description--

Зверніть увагу, як синій кордон зображень виходить за червоний кордон галереї. Причина в тому, як браузери розраховують розмір елементів контейнера.

Властивість `box-sizing` використовують для налаштування цієї поведінки. За замовчуванням використовується модель `content-box`. Завдяки цій моделі, коли елемент має певну ширину, ця ширина розраховується на основі вмісту елемента. Значення відступу та кордону додаються до загальної ширини, тому елемент збільшується, щоб відповідати цим значенням.

Спробуйте встановити `box-sizing` на `content-box`, використавши глобальний селектор `*`. Зараз ви не побачите жодних змін, оскільки використовуєте значення за замовчуванням.

# --hints--

Ви повинні мати селектор `*`.

```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
```

Селектор `*` повинен мати властивість `box-sizing`.

```js
assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
```

Селектор `*` повинен мати властивість `box-sizing` зі значенням `content-box`.

```js
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
```

# --seed--

## --seed-contents--

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
    <div class="gallery">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
    </div>
  </body>
</html>
  ```

```css
--fcc-editable-region--

--fcc-editable-region--

.gallery {
  border: 5px solid red;
  width: 50%;
}

img {
  width: 100%;
  border: 5px solid blue;
  padding: 5px;
}
```
